import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import { Button, NavBar, Space, Toast } from 'antd-mobile'
import axios from 'axios'
function ToOrder() {
    const chengk = useSelector((state) => state.chengk)
    const counterSlice = useSelector((state) => state.counterSlice)

    const [data, setData] = useState([])


    const goData = () => {
        axios.get('/api/pay', {

            params: {
                id: Math.random(),
                price: counterSlice.price,
            }

        }).then((res) => {
            console.log(res);

            setData(res.data)

        })
    }

    return (
        <div>
            <NavBar >订单详情</NavBar>

            <p>排队中...</p>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    <p>21:02</p>
                    <p>{counterSlice.start}</p>
                </div>
                <div>
                    <p>D2214</p>
                    <hr />
                    <p>{counterSlice.startTime}</p>
                </div>
                <div>
                    <p>21:02</p>
                    <p>{counterSlice.start}</p>
                </div>
                <div style={{ textAlign: 'center', margin: 'auto 0' }}>
                </div>


            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    <p>张三</p>
                    <div>
                        身份证 121212121212
                    </div>
                    <p>二等座</p>
                </div>
            </div>

            <Button onClick={() => {
                goData()
            }} block color='primary' size='large'>
                支付订单
            </Button>
        </div>
    )
}

export default ToOrder